﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DatePicker Control</title>
</head>
<body>
<h2 id="datePicker">DatePicker control</h2>
<p>The DatePicker control allow users to select a date, and to display that date in the specified format. While editing the control shows month in a keyboard like popup window and allows to zoom out to year view and decade view.&nbsp;&nbsp;If the date text box is at the bottom of a page then page will be pushed up to display the control above the month popup.</p>
<p><img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=547794" alt="Month Picker Control" width="162" height="136" />&nbsp; <img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=547796" alt="Month Picker - Year" width="211" height="136" />&nbsp; <img src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=547797" alt="Month Picker - Decade" width="222" height="136" /></p>
<h3>Namespace</h3>
<p><code>StoreAppLib.Controls</code></p>
<h3>Using DatePicker</h3>
<p>To use DatePicker in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.</p>
<p>To add DatePicker in a page, add the following namespace reference to the page.</p>
<p><code><span lang="EN" style="color: blue; font-size: 9.5pt;">&lt;</span><span lang="EN" style="color: #a31515; font-size: 9.5pt;">Page</span><span lang="EN" style="color: red; font-size: 9.5pt;">xmlns</span><span lang="EN" style="color: blue; font-size: 9.5pt;">:</span><span lang="EN" style="color: red; font-size: 9.5pt;">storeApp</span><span style="color: red; font-size: 9.5pt;">Control</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="using:StoreAppLib.Controls"</span><span style="color: blue; font-size: 9.5pt;"> ...</span></code></p>
<p>Use the following code to add control to the page. Use <strong>Date </strong>property to bind the control to your data source and use <strong>Format </strong>property to change the date display format.</p>
<p><code><span lang="EN" style="color: blue; font-size: 9.5pt;">&lt;</span><span lang="EN" style="color: red; font-size: 9.5pt;">storeApp</span><span style="color: red; font-size: 9.5pt;">Control</span><span lang="EN" style="color: blue; font-size: 9.5pt;">:</span><span lang="EN" style="color: #a31515; font-size: 9.5pt;">DatePicker</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">Width</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="150"</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">Height</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="30"</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">BorderThickness</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="1"</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">BorderBrush</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="Gray"</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">Date</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="{</span><span lang="EN" style="color: #a31515; font-size: 9.5pt;">Binding</span><span lang="EN" style="color: red; font-size: 9.5pt;"> CurrentDate<span lang="EN" style="color: blue; font-size: 9.5pt;">,</span> <span lang="EN" style="color: red; font-size: 9.5pt;">Mode</span><span lang="EN" style="color: blue; font-size: 9.5pt;">=TwoWay </span></span><span lang="EN" style="color: blue; font-size: 9.5pt;">}"</span><span lang="EN" style="color: red; font-size: 9.5pt;"> <br /></span><span style="color: red; font-size: 9.5pt;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span lang="EN" style="color: red; font-size: 9.5pt;">Format</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="dd-MMM-yyyy"&nbsp;/&gt;</span></code><span lang="EN">&nbsp;</span></p>
<p>To clear DatePicker value, use any of the following three methods&nbsp;</p>
<ol>
<li>Reset the date value bound to the date control's Date property</li>
<li>Call Clear() method of the date control</li>
<li>Bind to <span style="font-size: 10pt; font-family: 'Segoe UI','sans-serif'; background: white; color: red; line-height: 115%;">ClearCommand </span>property of the date control in XAML</li>
</ol>
<p>To set date range, use <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MinimumDate</font></span> and&nbsp;<span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MaximumDate</font></span> properties.&nbsp; Date control will display the invalid dates in different colour and will not allow user to select the dates. If you want to alert the user when tapping on an invalid date, set the property&nbsp; <font face="Courier New"><span lang="EN" style="color: red; font-size: 9.5pt;">ShowValidationMessage</span><span lang="EN" style="color: blue; font-size: 9.5pt;">="True"</span></font>. Control will show an alert using the following format string.</p>
<p><font size="2" color="#0000ff" face="Courier New">"Selected date {0:dd MMMM yyyy} is invalid.<br />Please select a date between {1:dd MMMM yyyy} and {2:dd MMMM yyyy}.<font size="2" color="#0000ff" face="Courier New">"</font></font></p>
<p>The format patterns in the alert string will be replaced with Selected Date, <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MinimumDate</font></span> and <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MaximumDate</font></span> respectively. You can replace the default validation error message by providing through <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MinDateValidationMessage</font></span>&nbsp; and <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">MaxDateValidationMessage</font></span>&nbsp; properties. Use .Net date format string pattern as shown above to replace with selected date, minimum date and maximum date.<br />If you want to use custom validation and dialog box, you can use <span lang="EN" style="color: red; font-size: 9.5pt;"><font face="Courier New">DateChanged</font></span> event of the date control. The DateTime property of the <span style="color: #2b91af;">DateTimeEventArgs </span>object in the event provide the selected date. Set the Cancel property of the object to true or false to cancel or accept the selected date by user</p>
<p>You can use the following properties to customize the control colours.</p>
<ul>
<li><span style="color: red; font-size: 9.5pt;"><code>DateForeground</code></span>: Date foreground colour property for days in the current month.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>DateOtherMonthForeground</code></span>: Date foreground colour property for days not in the current month.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>DateTodayForeground</code></span>: Today's date foreground colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>DateBackground</code></span>: Date background colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>SelectedDateBackground</code></span>: Selected date background colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>HeaderForeground</code></span>: Header foreground colour property for month, year and decade header.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>MonthHeaderForeground</code></span>: Month header foreground colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>MonthHeaderBackground</code></span>: Month header background colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>DateDisabledForeground</code></span>: Disabled date (when less than MinimumDate or greater than MaximumDate) foreground colour property.</li>
<li><span style="color: red; font-size: 9.5pt;"><code>DateDisabledBackground</code></span>: Disabled date (when less than MinimumDate or greater than MaximumDate) background colour property.</li>
</ul>
<p>&nbsp;</p></body>
</html>
